<!--
 * @Author: DHL
 * @Date: 2024-01-10 09:01:46
 * @LastEditors: DHL
 * @LastEditTime: 2024-01-10 09:45:34
 * @FilePath: \pms-web\src\pages\login\authLogin.vue
 * @Description: 授权登录
 * QQ:1175003009
-->
<template>
  <div class="tw-auth-login-wrapper">
    <!-- <div class="txt">
			<span>G</span>
			<span>o</span>
			<span>o</span>
			<span>g</span>
			<span>l</span>
			<span>e</span>
		</div> -->

    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useLoginUserStore } from '@/store/modules/loginUser'
  import { useRoute, useRouter } from 'vue-router'
  import { isNotEmpty } from '@/utils/isUtils'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { storageUtils } from '@/utils/storageUtils'
  import { LoginUserAppModel } from '@/api/common/model/loginModel'

  const route = useRoute()
  const router = useRouter()

  const loginUserStore = useLoginUserStore()

  onBeforeMount(() => {
    // 删除缓存登录用户
    storageUtils.removeLocalItem('TW-LOGIN-USER')
  })

  onMounted(() => {
    nextTick(async () => {
      const tokenParams: any = route.query.token || ''
      const app: any = route.query.app || ''

      if (isNotEmpty(tokenParams)) {
        const token = decodeURIComponent(tokenParams)

        loginUserStore.loginByToken(token).then(() => {
          if (isNotEmpty(app)) {
            setTimeout(function () {
              let userApp = {} as LoginUserAppModel

              loginUserStore.appList.forEach((item: LoginUserAppModel) => {
                if (item.appId === app) {
                  userApp = item
                }
              })

              if (isNotEmpty(userApp.id)) {
                loginUserStore.switchAppAction(userApp)
              } else {
                ElMessageBox.alert('未查询到授权系统', '提示', {
                  confirmButtonText: '确认',
                  callback: () => {}
                })
              }
            }, 3000)
          } else {
            router.push({ path: '/' })
          }
        })
      } else {
        ElMessageBox.alert('授权Token为空', '提示', {
          confirmButtonText: '确认',
          callback: () => {}
        })
      }
    })
  })
</script>

<style scoped lang="scss">
  .tw-auth-login-wrapper {
    width: 100%;
    height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    $blue: #4285f4;
    $red: #db4437;
    $yellow: #f4b400;
    $green: #0f9d58;
    $colors-list: $blue $red $yellow $green;

    .loader {
      display: block;

      span {
        display: inline-block;
        margin-top: 10px;
        height: 20px;
        width: 20px;
        border-radius: 50%;

        &:not(:first-child) {
          margin-left: 10px;
        }
      }

      @each $current-color in $colors-list {
        $i: index($colors-list, $current-color);
        $t: $i * -0.25;

        span:nth-child(#{$i}) {
          background: $current-color;
          animation: move 1s ease-in-out (#{$t}s) infinite alternate;
        }
      }
    }

    @keyframes move {
      from {
        transform: translateY(-10px);
      }

      to {
        transform: translateY(5px);
      }
    }

    .txt {
      font-size: 4em;
      text-align: center;
      letter-spacing: -8px;
      margin-top: 0;

      span {
        &:first-child {
          color: $blue;
        }

        &:nth-child(2) {
          color: $red;
        }

        &:nth-child(3) {
          color: $yellow;
        }

        &:nth-child(4) {
          color: $blue;
        }

        &:nth-child(5) {
          color: $green;
        }

        &:last-child {
          color: $red;
          transform: rotate(-20deg);
          display: inline-block;
        }
      }
    }
  }
</style>
